import { Breadcrumb, Layout, theme } from "antd"
import React, { FC, memo } from "react"
import UserInfo from "../UserInfo"
import { useLocation } from "react-router-dom"

const { Header } = Layout

const MainHeader: FC = () => {
    const { pathname } = useLocation()
    const {
        token: { colorBgContainer }
    } = theme.useToken()

    return (
        <>
            <Header style={{ paddingLeft: 20, background: colorBgContainer }}>
                <div style={{ float: "left" }}>
                    <Breadcrumb style={{ margin: "20px 5px", fontSize: "16px" }} items={[{ title: pathname }]}></Breadcrumb>
                </div>
                <div style={{ float: "right" }}>
                    <UserInfo />
                </div>
            </Header>
        </>
    )
}

export default memo(MainHeader)
